<template>
    <article >
        <Slider :items="items" :cname="$style.slider"/>
        <section :class="$style.list">
            <div v-for="item in enters" :key="item.img" :class="$style.item" >
                <router-link :to="{ name: item.href}">
                    <img :src="item.img" :alt="item.title">
                    <h4>{{ item.title }}</h4>
                </router-link>
            </div>
        </section>
    </article>
</template>
<script>
import Slider from "../core/slider.vue"
import { entersJson, itemsSliderJson } from "./store"

export default {
    components: {
        Slider,
    },
    data() {
        return {
            enters: entersJson,
            items: itemsSliderJson,
        }
    },
}
</script>
<style lang="scss" module>
@import '../../css/element.scss';
.slider{
  margin-top: 120px;
  img{
    width: 100%;
  }
}
.list{
  @include list(row);
  background: #fff;
  padding-top: 40px;
  padding-bottom: 20px;
  justify-content: space-around;
  a{
    text-decoration: none;
  }
  .item{
    text-align: center;
    img{
      display: inline-block;
      width: 90px;
      height: 90px;
    }
    h4{
      font-size: 26px;
      margin-top: 12px;
      color:#666;
    }
  }
}
</style>
